<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layuiAdmin 网站用户 iframe 框</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/Font-Awesome-master/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/base.css?v={$version}">
    <script src="/js/jquery-2.1.1.min.js"></script>
    <script src="/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
    <style>
        .grid {
            padding: 4px;
        }

        .grid li {
            width: 28px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            border: 1px solid #e6e6e6;
            border-top-color: rgb(230, 230, 230);
            border-right-color: rgb(230, 230, 230);
            border-bottom-color: rgb(230, 230, 230);
            border-left-color: rgb(230, 230, 230);
            margin: 4px;
            text-align: center;
            border-radius: 1px;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            float: left;
            list-style: none;
        }

        .grid li:hover {
            background: #1E9FFF;
            color: #fff;
            border-color: #1E9FFF;
        }

        .sizing {
            display: none;
            position: absolute;
            left: 0;
            top: 37px;
            width: 100%;
            background: #fff;
            border: 1px solid #D2D2D2;
            border-radius: 0 0 2px 2px;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
            height: 246px;
            overflow: auto;
            z-index: 10;
        }

        .icon_search {
            margin: 8px 8px 0;
        }

        .edui-default .edui-editor {
            z-index: 0 !important;
        }
    </style>
    {block name="css"}
    {/block}
</head>

<body>

    <div class="layui-form" style="padding: 20px 0 0 0;">
        {if isset($input)}
        {foreach $input as $v}
        {if $v['type'] == 'text'}
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">{$v.name}</label>
            <div class="layui-input-inline flex-col-md-7">
                <input type="text" name="{$v.key}" {if isset($v.disabled)} disabled {/if} {if isset($v.required)}
                    value="{$v.required}" {/if} {if isset($v.verify)} lay-verify="{$v.verify}" {/if}
                    placeholder="请输入{$v.name}" autocomplete="off" class="layui-input">
            </div>
        </div>
        {elseif $v['type'] == 'number'}
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3 width">{$v['name']}:</label>
            <div class="layui-input-block flex-col-md-3" style="width:40%">
                <input type="number" maxlength="80" name="{$v['key']}" {if isset($v.disabled)} disabled {/if} {if
                    isset($v.required)} value="{$v.required}" {/if} {if isset($v.verify)} lay-verify="{$v.verify}" {/if}
                    placeholder="请输入数字" autocomplete="off" class="layui-input">
            </div>
        </div>
        {elseif $v['type'] == 'password'}
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">{$v.name}</label>
            <div class="layui-input-inline flex-col-md-7">
                <input type="password" name="{$v.key}" {if isset($v.disabled)} disabled {/if} {if isset($v.verify)}
                    lay-verify="{$v.verify}" {/if} placeholder="请输入{$v.name}" autocomplete="off" class="layui-input">
            </div>
        </div>
        {elseif $v['type'] == 'y_image'}
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">{$v.name}</label>
            <div class="layui-input-inline flex-col-md-7">
                <input type="text" name="{$v.key}" {if isset($v.verify)} lay-verify="{$v.verify}" {/if}
                    placeholder="请上传图片" autocomplete="off" class="layui-input">
            </div>
            <button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-{$v.key}">上传图片</button>
        </div>
        {elseif $v['type'] == 'image'}
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">{$v.name}</label>
            <div class="layui-input-inline flex-col-md-7">
                <input type="text" name="{$v.key}" {if isset($v.verify)} lay-verify="{$v.verify}" {/if}
                    placeholder="请上传图片" autocomplete="off" class="layui-input">
                <input type="hidden" name="file_id">
            </div>
            <button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-{$v.key}">上传图片</button>
        </div>
        {elseif $v['type'] == 'file'}
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">{$v.name}</label>
            <div class="layui-input-inline flex-col-md-7">
                <input type="text" name="{$v.key}" {if isset($v.verify)} lay-verify="{$v.verify}" {/if}
                    placeholder="请上传文件" autocomplete="off" class="layui-input">
                <input type="hidden" name="file_id">
            </div>
            <button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-{$v.key}">上传文件</button>
        </div>
        {elseif $v['type'] == 'radio'}
        <div class="layui-form-item page-row" lay-filter="sex">
            <label class="layui-form-label flex-col-md-3">{$v.name}</label>
            <div class="layui-input-block flex-col-md-3">
                {foreach $v['data'] as $kk=>$vv}
                <input type="radio" name="{$v.key}" value="{$kk}" title="{$vv}" {if isset($v.disabled)} disabled {/if}
                    {if isset($v.required) && $v.required==$kk} checked {/if}>
                {/foreach}
            </div>
        </div>
        {elseif $v['type'] == 'select'}
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">{$v['name']} :</label>
            <div class="layui-input-inline flex-col-md-7">
                <select id="select_{$v['key']}" name="{$v['key']}" lay-filter="{$v['key']}" {if isset($v.verify)}
                    lay-verify="{$v.verify}" {/if}>
                    <option value="">请选择</option>
                    {foreach $v.select_data as $kk=>$vv}
                    <option value="{$vv.id}" {if isset($v.required) && $v.required==$kk} selected {/if}>{$vv.name}
                    </option>
                    {/foreach}
                </select>
            </div>
        </div>
        {if isset($v.ld)}
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">{$v['ld']['name']} :</label>
            <div class="layui-input-inline flex-col-md-7">
                <select id="select_{$v['ld']['key']}" name="{$v['ld']['key']}" lay-filter="{$v['ld']['key']}" {if
                    isset($v.ld.verify)} lay-verify="{$v.ld.verify}" {/if}>
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
        {if isset($v.ld.add)}
        <div id="select_add_{$v.ld.key}"></div>
        {/if}
        {if isset($v.ld.ld)}
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">{$v['ld']['ld']['name']} :</label>
            <div class="layui-input-inline flex-col-md-7">
                <select id="select_{$v['ld']['ld']['key']}" name="{$v['ld']['ld']['key']}"
                    lay-filter="{$v['ld']['ld']['key']}" {if isset($v.ld.ld.verify)} lay-verify="{$v.ld.ld.verify}"
                    {/if}>
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
        {if isset($v.ld.ld.add)}
        <div id="select_add_{$v.ld.ld.key}"></div>
        {/if}
        {/if}
        {/if}
        {elseif $v['type'] == 'textarea'}
        <!--多行文本-->
        <div class="layui-form-item page-row layui-form-text" style="width:80%">
            <label class="layui-form-label flex-col-md-3 width">{$v['name']}:</label>
            <div class="layui-input-block flex-col-md-3">
                <textarea name="{$v['key']}" {if isset($v.disabled)} disabled {/if} {if isset($v.verify)}
                    lay-verify="{$v.verify}" {/if} placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        {elseif $v['type'] == 'content'}
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">{$v.name}</label>
            <div class="layui-input-block flex-col-md-3" style="width: 70%">
                <script id="content_{$v['key']}" type="text/plain"></script>
                <textarea name="{$v['key']}" id="content_val_{$v['key']}" style="display: none;"></textarea>
            </div>
        </div>
        {elseif $v['type'] == 'icon'}
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">{$v.name}</label>
            <div class="layui-input-inline flex-col-md-7" style="position:relative;">
                <input type="text" name="{$v.key}" autocomplete="off" class="layui-input">
                <span class="{$v.key}_icon_select_action layui-btn layui-btn-primary"
                    style="position: absolute;right: -94px;top:0px;">搜索图标</span>
                <div class="icon_select_options sizing" style="display: none;">
                    <div class="loading {$v.key}_icon">
                        图标加载中...　<a href="http://code.zoomla.cn/boot/font.html" target="_blank">访问图标原站点</a>
                    </div>
                </div>
            </div>
        </div>

        {/if}
        {/foreach}
        {else}
        缺少input表单配置数据
        {/if}

        <div class="layui-form-item page-row layui-hide">
            <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
        </div>
    </div>

    <script>

        layui.config({
            base: '/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form', 'upload', 'layer'], function () {
            var $ = layui.$
                , form = layui.form
                , upload = layui.upload;
            "{foreach $input as $v}"
            /*accepMime  设置的类型可以参考W3C：  https://www.w3school.com.cn/media/media_mimeref.asp */
            "{if $v.type == 'icon'}"
            $('.' + "{$v.key}" + '_icon_select_action').click(function () {
                console.log(123);
                if ($('.' + "{$v.key}" + '_icon_select_action').closest('.layui-input-inline flex-col-md-7').find(".sizing").css('display') == 'block') {
                    $('.' + "{$v.key}" + '_icon_select_action').closest('.layui-input-inline flex-col-md-7').find(".sizing").hide();
                    $(this).html('搜索图标');
                    return false;
                }
                $(".sizing").hide();
                $('.' + "{$v.key}" + '_icon_select_action').closest('.layui-input-inline flex-col-md-7').find(".sizing").show();

                $(this).html('关闭图标');
                var len = $('.' + "{$v.key}" + '_icon_select_action').closest('.layui-input-inline flex-col-md-7').find(".loadding").show().find('li').length;
                if (len <= 0) {
                    $.ajax({
                        url: "{:url('api/getAwesome')}",
                        success: function (res) {
                            var data = res.data;
                            var html = '<div class="icon_search"><input placeholder="输入关键词搜索" class="layui-input icon_search_input"></div><ul class="grid">';
                            for (i in data) {
                                html += '<li><i class="fa ' + data[i] + '" aria-hidden="true"></i></li>';
                            }
                            html += '</ul>';
                            console.log($('.' + "{$v.key}" + '_icon_select_action').closest('.layui-input-inline flex-col-md-7').find(".loadding"));
                            console.log(html);
                            $('.' + "{$v.key}" + "_icon").html(html);
                        }
                    })
                }
            })
            $('body').on('click', ".{$v.key}_icon" + ' .grid li', function () {
                var className = $(this).find('i').attr('class');
                console.log(className);
                $(this).closest('.layui-input-inline flex-col-md-7').find('input').val(className);
                $(this).closest('.layui-input-inline flex-col-md-7').find('.sizing').hide();
                $(this).closest('.layui-input-inline flex-col-md-7').find('.' + "{$v.key}" + '_icon_select_action').html('搜索图标');
            })
            "{elseif $v.type == 'y_image'}"
            upload.render({
                elem: '#layuiadmin-upload-' + "{$v.key}"
                , url: "{:url('file_y')}"
                , accept: 'images'
                , method: 'post'
                , acceptMime: 'image/*'
                , done: function (res) {
                    if (res.code == 200) {
                        layer.msg('上传成功');
                        console.log(res.data);
                        $(this.item).prev("div").children("input").val(res.data.file)
                    } else {
                        layer.msg(res.message);
                    }
                }
            });
            "{elseif $v.type == 'image'}"
            upload.render({
                elem: '#layuiadmin-upload-' + "{$v.key}"
                , url: "{:url('file')}"
                , accept: 'images'
                , method: 'post'
                , acceptMime: 'image/*'
                , done: function (res) {
                    if (res.code == 200) {
                        layer.msg('上传成功');
                        $(this.item).prev("div").children("input").eq(0).val(res.data.name + '.' + res.data.ext)
                        $(this.item).prev("div").find("input").eq(1).val(res.data.id);
                    } else {
                        layer.msg(res.message);
                    }
                }
            });
            "{elseif $v.type == 'file'}"
            upload.render({
                elem: '#layuiadmin-upload-' + "{$v.key}"
                , url: "{:url('file')}"
                , accept: 'file'
                , method: 'post'
                , done: function (res) {
                    if (res.code == 200) {
                        layer.msg('上传成功');
                        $(this.item).prev("div").children("input").eq(0).val(res.data.name + '.' + res.data.ext)
                        $(this.item).prev("div").find("input").eq(1).val(res.data.id);
                    } else {
                        layer.msg(res.message);
                    }
                }
            });
            "{elseif $v.type == 'select' && isset($v.ld)}"
            form.on('select(' + "{$v.key}" + ')', function (data) {
                var select_msg = '<option value=\"\">请选择</option>';
                var val = data.value;
                if (val.length > 0) {
                    $.post("{:url('ld')}", {
                        table: "{$v.ld.table}",
                        key: "{$v.key}",
                        val: val
                    }, function (res) {
                        $('#select_' + "{$v.ld.key}").html('');
                        var regionListHTML = select_msg;
                        for (var i = 0; i < res.data.data.length; i++) {
                            regionListHTML += '<option value="' + res.data.data[i].id + '">' + res.data.data[i].name + '</option>'
                        }
                        $('#select_' + "{$v.ld.key}").html(regionListHTML);
                        "{if isset($v.ld.ld)}"
                        $('#select_' + "{$v.ld.ld.key}").html(select_msg);
                        "{/if}"
                        "{if isset($v.ld.ld.ld)}"
                        $('#select_' + "{$v.ld.ld.ld.key}").html(select_msg);
                        "{/if}"
                        form.render();
                        "{if isset($v.ld.ld)}"
                        form.on('select(' + "{$v.ld.key}" + ')', function (data) {
                            var val = data.value;
                            if (val.length > 0) {
                                $.post("{:url('ld')}", {
                                    table: "{$v.ld.ld.table}",
                                    key: "{$v.ld.key}",
                                    val: val
                                }, function (res) {
                                    $('#select_' + "{$v.ld.ld.key}").html('');
                                    var regionListHTML = select_msg;
                                    for (var i = 0; i < res.data.data.length; i++) {
                                        regionListHTML += '<option value="' + res.data.data[i].id + '">' + res.data.data[i].name + '</option>'
                                    }
                                    $('#select_' + "{$v.ld.ld.key}").html(regionListHTML);
                                    "{if isset($v.ld.ld.ld)}"
                                    $('#select_' + "{$v.ld.ld.ld.key}").html(select_msg);
                                    "{/if}"
                                    form.render();
                                    "{if isset($v.ld.ld.ld)}"
                                    form.on('select(' + "{$v.ld.ld.key}" + ')', function (data) {
                                        var val = data.value;
                                        if (val.length > 0) {
                                            $.post("{:url('ld')}", {
                                                table: "{$v.ld.ld.ld.table}",
                                                key: "{$v.ld.ld.key}",
                                                val: val
                                            }, function (res) {
                                                $('#select_' + "{$v.ld.ld.ld.key}").html('');
                                                var regionListHTML = select_msg;
                                                for (var i = 0; i < res.data.data.length; i++) {
                                                    regionListHTML += '<option value="' + res.data.data[i].id + '">' + res.data.data[i].name + '</option>'
                                                }
                                                $('#select_' + "{$v.ld.ld.ld.key}").html(regionListHTML);
                                                form.render();
                                            }, 'json')
                                        }
                                    });
                                    "{/if}"
                                }, 'json')
                            }
                        });
                        "{elseif isset($v.ld.add)} && isset($v.ld.add.table[0]['table'])"
                        form.on('select(' + "{$v.ld.key}" + ')', function (data) {
                            var val = data.value;
                            if (val.length > 0) {
                                var product_id = data.value;
                                if (product_id.length > 0) {
                                    var table = "{$v.ld.add.table[0]['table']}";
                                    $.post("{:url('ld')}", {
                                        table: table,
                                        key: "{$v.ld.key}",
                                        val: product_id
                                    }, function (res) {
                                        console.log(res, 724);
                                        var html = '';
                                        "{if isset($v.ld.add.table[1]['table'])}"
                                        for (var i = 0; i < res.data.data.length; i++) {
                                            html += "<div class=\"layui-form-item page-row\">\n" +
                                                "    <label class=\"layui-form-label flex-col-md-3 width\">" + res.data.data[i].name + ":</label>\n" +
                                                "    <div class=\"layui-input-inline flex-col-md-7\" >\n" +
                                                "        <select name=\"specification_value_ids[" + res.data.data[i].id + "]\" lay-verify=\"required\" id=\"key_" + res.data.data[i].id + "\">\n" +
                                                "        </select>\n" +
                                                "    </div>\n" +
                                                "</div>";
                                            var num = 0;
                                            $.post("{:url('ld')}", {
                                                table: "{$v.ld.add.table[1]['table']}",
                                                key: "{$v.ld.add.table[1]['key']}",
                                                val: res.data.data[i].id
                                            }, function (list) {
                                                var valhtml = select_msg;
                                                for (var s = 0; s < list.data.data.length; s++) {
                                                    valhtml += '<option value="' + list.data.data[s].id + '">ID:' + list.data.data[s].id + '=>' + list.data.data[s].name + '</option>'
                                                }
                                                $('#key_' + list.data.id).html(valhtml);
                                                form.render();
                                                num++;
                                            }, 'json')
                                        }
                                        $('#select_add_' + "{$v.ld.key}").html(html);
                                        "{else}"
                                        "{/if}"

                                        form.render();
                                    }, 'json')
                                }
                            }
                        });
                        "{/if}"
                    }, 'json')
                }
            });
            "{/if}"
            "{/foreach}"
            //自定义验证
            form.verify({
                nickname: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }
                }
                , fd_number: [/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, '只支持2位小数的数字']
                , pass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]

                //确认密码
                , repass: function (value) {
                    if (value !== $('#LAY_password').val()) {
                        return '两次密码输入不一致';
                    }
                }
            });
            $('body').on('keyup', '.icon_search_input', function () {
                var keyword = $.trim($(this).val());
                if (!keyword) {
                    $(this).closest('.icon_select_options').find('li').show();
                } else {
                    $(this).closest('.icon_select_options').find('li').each(function () {
                        var className = $(this).find('i').attr('class');
                        if (className.indexOf(keyword) >= 0) {
                            $(this).show()
                        } else {
                            $(this).hide()
                        }
                    })
                }
            })

        })
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/plug/UEditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/plug/UEditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        "{foreach $input as $v}"
        "{if $v['type'] == 'content'}"
        "{if isset($v.readonly)}"
        var ue = UE.getEditor('content_' + "{$v['key']}", {
            initialFrameHeight: 400,
            readonly: true,
        }).ready(function () {
            UE.getEditor('content_' + "{$v['key']}").addListener('contentChange', function () {
                var html = UE.getEditor('content_' + "{$v['key']}").getContent();
                console.log(html, 111);
                $("#content_val_" + "{$v['key']}").val(html);
            })
        });

        "{else}"
        UE.getEditor('content_' + "{$v['key']}", {
            initialFrameHeight: 400
        }).ready(function () {
            UE.getEditor('content_' + "{$v['key']}").addListener('contentChange', function () {
                var html = UE.getEditor('content_' + "{$v['key']}").getContent();
                console.log(html, 222);
                $("#content_val_" + "{$v['key']}").val(html);
            })
        });
        "{/if}"
        "{/if}"
        "{/foreach}"
    </script>
</body>

</html>